// 第一个from表单的提交
$(document).ready(function () {
  // 创建隐藏的表单字段，并设置默认值
  // 页面加载完成后执行以下代码
  // 点击事件
  $("#booking-form").submit(function (event) {
    event.preventDefault(); // 阻止表单默认提交行为
    // 修改页面内容为“预定成功”的函数
    function displayBookingSuccess() {
      $(".a_b_f").text("预定成功"); // 找到类为"a_b_f"的元素并修改其文本内容为“预定成功”
    }
    function displayBookingFailure() {
      $(".a_b_f").text("预定失败"); // 找到类为"a_b_f"的元素并修改其文本内容为“预定成功”
    }

    // 定义添加隐藏字段的通用函数
    function addHiddenFieldToForm(fieldName, fieldValue) {
      $("<input>")
        .attr({
          type: "hidden",
          id: fieldName,
          name: fieldName,
          value: fieldValue,
        })
        .appendTo("#booking-form"); // 将隐藏字段添加到表单中
      console.log("执行到了这里");
    }

    // 添加隐藏字段
    // addHiddenFieldToForm('scheduledTime', '2023-12-31T08:00');
    // 这个用的是当前阿帕奇服务器的时间
    // 获取当前电脑时间并转换为 UTC 时间
    // 获取当前时间
    var currentDate = new Date();

    // 格式化时间为 "年-月-日 时:分:秒" 的格式
    var formattedDate =
      currentDate.getFullYear() +
      "-" +
      (currentDate.getMonth() + 1) +
      "-" +
      currentDate.getDate() +
      " " +
      currentDate.getHours() +
      ":" +
      currentDate.getMinutes() +
      ":" +
      currentDate.getSeconds();

    // 添加隐藏字段
    addHiddenFieldToForm("scheduledTime", formattedDate);
    addHiddenFieldToForm("roomNumber", "");
    addHiddenFieldToForm("paymentMethod", "支付宝");
    addHiddenFieldToForm("bookingMethod", "线上预定");
    addHiddenFieldToForm(
      "textarea",
      "该用户为线上预定，请在办理入住时现场询问或提前打电话联系，并请在办理入住的时候安排房间号"
    );

    // 获取表单数据
    var formData = {
      customerName: $("#customerName").val(),
      customerPhone: $("#customerPhone").val(),
      roomType: $("#roomType").val(),
      roomCount: $("#roomCount").val(),
      checkinDate: $("#checkinDate").val(),
      checkoutDate: $("#checkoutDate").val(),
      adultCount: $("#adultCount").val(),
      childCount: $("#childCount").val(),
      scheduledTime: $("#scheduledTime").val(),
      roomNumber: $("#roomNumber").val(),
      paymentMethod: $("#paymentMethod").val(),
      bookingMethod: $("#bookingMethod").val(),
      remarks: $("#textarea").val(),
    };
    console.log(formData);

    // 进行前端验证
    var isValid = validateForm(formData); // 自定义的验证函数，验证表单数据是否合法

    if (isValid) {
      // 使用 Ajax 发送数据到后端
      $.ajax({
        type: "POST",
        url: "../backend/api/homepageRoomReservation_1.php", // 后端 PHP 处理程序的 URL
        data: formData, // 要发送的数据
        success: function (response) {
          // 处理后端返回的响应
          console.log(response);
          var response = JSON.parse(response);
          var responseArray = Object.entries(response).map(([key, value]) => ({
            key,
            value,
          }));
          // 输出结果
          console.log(responseArray);
          if (response.success == true) {
            alert("预订成功！");
            // 在这里触发“预定成功”的页面内容修改
            displayBookingSuccess();
          } else {
            console.log("预订失败，请稍后重试。");
            // 在这里触发“预定失败”的页面内容修改
            displayBookingFailure();
          }
        },
        error: function () {
          // 处理请求错误
          console.log("预订失败，请稍后重试。");
        },
      });
    }
    console.log("表单验证通过");
    displayBookingSuccess();
    console.log("格式化后的表单数据:", formData);
    // return isValid;
  });

  function validateForm(formData) {
    if (formData.customerName === "") {
      alert("请填写客户名称");
      return false;
    }
    if (
      formData.customerPhone === "" ||
      !/^1[34578]\d{9}$/.test(formData.customerPhone)
    ) {
      alert("电话号码格式不正确");
      return false;
    }
    if (formData.roomType === "") {
      alert("请选择房间类型");
      return false;
    }
    if (
      formData.roomCount === "" ||
      isNaN(formData.roomCount) ||
      formData.roomCount <= 0
    ) {
      alert("请填写有效的房间数量");
      return false;
    }
    if (
      formData.adultCount === "" ||
      isNaN(formData.adultCount) ||
      formData.adultCount < 1
    ) {
      alert("请填写有效的成人数量");
      return false;
    }
    if (formData.checkinDate === "" || formData.checkoutDate === "") {
      alert("请选择入住和退房日期");
      return false;
    }
    if (formData.checkinDate >= formData.checkoutDate) {
      alert("退房日期必须晚于入住日期");
      return false;
    }
    // 其他需要的验证条件

    // 如果所有验证通过，则返回 true
    return true;
  }
});

// 控制台日志输出
console.log("前端代码运行中...");





// 当表单提交时执行
$("#contact-form").submit(function (event) {
  // 阻止表单默认提交行为
  event.preventDefault();

  // 获取当前时间
  var currentDate = new Date();

  // 格式化时间为 "年-月-日 时:分:秒" 的格式
  var formattedDate =
    currentDate.getFullYear() +
    "-" +
    (currentDate.getMonth() + 1) +
    "-" +
    currentDate.getDate() +
    " " +
    currentDate.getHours() +
    ":" +
    currentDate.getMinutes() +
    ":" +
    currentDate.getSeconds();

  // 简单的前端表单验证
  var name = $('input[name="name"]').val();
  var phone = $('input[name="phone"]').val();
  var email = $('input[name="email"]').val();
  var checkInDate = $('input[name="checkin_at2"]').val();
  var checkOutDate = $('input[name="checkout_at2"]').val();

  // 输出表单验证信息到控制台
  if (name === "") {
    console.log("姓名未填写");
  }
  if (phone === "") {
    console.log("手机号未填写");
  }
  if (email === "") {
    console.log("邮箱未填写");
  }
  if (checkInDate === "") {
    console.log("入住日期未填写");
  }
  if (checkOutDate === "") {
    console.log("离店日期未填写");
  }

  if (
    name === "" ||
    phone === "" ||
    email === "" ||
    checkInDate === "" ||
    checkOutDate === ""
  ) {
    console.log("请填写完整信息");
    return; // 如果有字段未填写，则阻止继续执行
  }

  // 更复杂的表单验证逻辑可以继续在这里添加

  // 获取表单数据
  // 将格式化后的时间添加到表单数据中
  var formData = {
    name: name,
    phone: phone,
    email: email,
    roomType: $("#booking-roomtype").val(),
    checkInDate: checkInDate,
    checkOutDate: checkOutDate,
    message: $('textarea[name="message"]').val(),
    submitTime: formattedDate, // 将格式化后的时间添加到表单数据中
  };

  // 控制台日志输出
  console.log("表单数据验证通过，准备发送数据到后端：", formData);

  //发送数据到后端，这里假设使用 AJAX 方法发送 POST 请求
    $.ajax({
        type: 'POST',
        url: '../backend/api/homepageRoomReservation_2.php',  // 替换成你的后端处理数据的URL
        data: formData,
        success: function (response) {
            // 数据成功发送到后端后的处理
            console.log('数据发送成功');
            // 可以在这里执行其他操作，比如显示成功信息给用户
            // 刷新页面
            window.location.reload();
        },
        error: function (error) {
            // 处理发送数据到后端的错误
            console.log('发送数据时出现错误');
            // 可以在这里显示错误信息给用户
        }
    });
});
